<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>登录</title>
    <!-- 引入 WeUI CDN 链接 -->
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.3.0/weui.min.css"/>
    <link rel="stylesheet" href="./css/base.css"/>

</head>
<body>
<div class="page">
    <div class="weui-form" style="min-height: 80%">
        <div class="weui-form__text-area">
            <img src="/img/logo.jpg" style="width: 100%;"alt="">
        </div>
        <div class="weui-form__control-area">
            <div class="weui-cells__group weui-cells__group_form">
                <div class="weui-cells weui-cells_form">
                    <div class="weui-cell weui-cell_active">
                        <div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="number"  placeholder="请输入手机号" id="i-mobile" value=""/>
                        </div>
                    </div>
                    <div class="weui-cell weui-cell_active">
                        <div class="weui-cell__hd"><label class="weui-label">密码</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="password"  placeholder="请输入密码" id="i-password" value=""/>
                        </div>
                    </div>
                </div>
                <div class="weui-cells__tips fr" style="margin-top: 20px;font-size: 15px">
                    <a class="weui-link" href="./register.html">立即注册</a>
                </div>
                <div class="weui-cells__tips" style="margin-top: 20px;font-size: 15px">
                    <a class="weui-link" href="./forget.html">忘记密码</a>
                </div>
            </div>
        </div>

        <div class="weui-form__opr-area">
            <a class="weui-btn weui-btn_primary" href="javascript:void(0)" id="doLogin">确定</a>
        </div>
    </div>
    <div class="weui-toptips weui-toptips_warn" id="topTips"></div>
    <p style="text-align: center;color: #666">最终解释权归豪马公会所有</p>
    <a class="beian" href="http://www.beian.miit.gov.cn/" target="_blank">
        网站备案：赣ICP备19013735号
    </a>
</div>
<script src="./js/zepto.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/2.2.1/js.cookie.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#doLogin").click(function(){
            const mobile = $("#i-mobile").val();
            const password = $("#i-password").val();
            if(!(/^1[3456789]\d{9}$/.test(mobile))){
               msg('手机格式不正确');
               return false
            }
            if(!(/^.{6,}$/.test(password))){
                msg('密码不能少于6位');
                return false
            }
            $.post('/login', {mobile: mobile, password: password}, function (res) {
                if (res.code !== 0) {
                    msg(res.msg);
                } else {
                    Cookies.set('token', res.data.token, { expires: 7, path: ''});
                    window.location.href = '/'
                }
            })
        })
    });
    function msg(msg, time = 1000) {
        const topTip = $('#topTips');
        topTip.text(msg);
        topTip.fadeIn(msg);
        setTimeout(function () {
            topTip.fadeOut()
        }, time)
    }
</script>
</body>
</html>
